<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script>
$(function() {
	var colsNum = $("#date").val();
	var year = $("#year").val();
	var month = $("#month").val();
	var time = function(index) {
		var colsIndex = (index % colsNum);
		if (colsIndex == 1) {
			colsIndex = "09";
		} else if (colsIndex == 2) {
			colsIndex = "12";
		} else if (colsIndex == 3) {
			colsIndex = "15";
		} else if (colsIndex == 4) {
			colsIndex = "18";
		} else if (colsIndex == 5) {
			colsIndex = "21";
		} else if (colsIndex == 6) {
			colsIndex = "24";
		}
		return colsIndex;
	};
	var unitedForDelete = function(date, index) {
		return date + "|" + time(index);
	};
	var getSeatName = function(index) {
		var colsIndex = (index % 7), rowsName = Math.ceil((index + 1) / 7) - 1;
		if (colsIndex == 1) {
			colsIndex = "9";
		} else if (colsIndex == 2) {
			colsIndex = "12";
		} else if (colsIndex == 3) {
			colsIndex = "15";
		} else if (colsIndex == 4) {
			colsIndex = "18";
		} else if (colsIndex == 5) {
			colsIndex = "21";
		} else if (colsIndex == 6) {
			colsIndex = "24";
		}
		return rowsName + '|' + colsIndex;
	};
	var select = [];
	var selectedSchedule = [];

	$(".schedule td").toggle(function() {
		var index = $(this).index();
		var date = year + "." + month + "." + $(this).attr("id");
		if (index == 0 || $(this).attr("id") == "holdTime") {
		} else {
			for ( var i = 0; i < select.length; i++) {
				if (select[i] == getSeatName(($(this).parent()
						.index() * 7)
						+ (index))) {
					return;
				}
			}
			selectedSchedule.push(date + "|" + time(index));
			selectedSchedule.join(",");
			$(this).css("background", "skyblue");
			alert(selectedSchedule);
		}
	},function() {
		var index = $(this).index();
		date = year + "." + month + "." + $(this).attr("id");
		if (index == 0 || $(this).attr("id") == "holdTime") {
		} else {
			for ( var i = 0; i < select.length; i++) {
				if (select[i] == getSeatName(($(this).parent()
						.index() * 7)
						+ (index))) {
					return;
				}
			}
			for (var i = 0; i < selectedSchedule.length; i++) {
				if (selectedSchedule[i] == unitedForDelete(date, index)) {
					selectedSchedule.splice(i, 1);
				}
			}			
			$(this).css("background", "#f9f9f9");
		}
	});
	$("#addBtn").click(function() {
		var index = $(this).index();
		for (var i = 0; i < selectedSchedule.length; i++) {
			if (selectedSchedule[i] == unitedForDelete(date, index)) {
				selectedSchedule.splice(i, 1);
			}
		}
		$.ajax({
			type : "post",
			url : "${initParam.root}admin/updateSchedule.do",
			data : "date=" + selectedSchedule + "&showingVO.showingNo=${requestScope.allInfoMap.showingContent.showingNo}",
			datatype : "json",
			success : function(data) {
				$.each(data, function(index, item) {
					selectedSchedule.push(item);
				});
				for ( var i = 0; i < 217; i++) {
					for ( var j = 0; j < selectedSchedule.length; j++) {
						if (selectedSchedule[j] == getSeatName(i)) {
							$(".schedule td").eq(i).css("background","red");
						}
					}
				}
				selectedSchedule = [];
			}
		});
	});
	$.ajax({
		type : "post",
		url : "${initParam.root}admin/getSchedule.do",
		data : "showingNo=${requestScope.allInfoMap.showingContent.showingNo}",
		datatype : "json",
		success : function(data) {
			$.each(data, function(index, item) {
				select.push(item);
			});
			for ( var i = 0; i < 217; i++) {
				for ( var j = 0; j < select.length; j++) {
					if (select[j] == getSeatName(i)) {
						$(".schedule td").eq(i).css("background",
								"red");
					}
				}
			}
		}
	});
});
</script>
<input type="hidden" id="year" value="${requestScope.allInfoMap.year}">
<input type="hidden" id="month"
	value="${requestScope.allInfoMap.startMonth}">
<input type="hidden" id="date" value="${requestScope.allInfoMap.date}">
<h3>스케쥴</h3>
<hr align="left" width="150">
<center>
	<table>
		<thead>
			<tr>
				<td align="center" colspan="2"><h3>스케쥴러(${requestScope.allInfoMap.showingContent.movieVO.title
						}, ${requestScope.allInfoMap.showingContent.cinemaVO.name
						},${requestScope.allInfoMap.showingContent.startDate
						}~${requestScope.allInfoMap.showingContent.endDate })</h3></td>
			</tr>
			<tr>
				<td align="left"><select name="selectMonth" id="selectMonth">
						<option value="0">--월--</option>
						<c:forEach var="data"
							begin="${requestScope.allInfoMap.startMonth }"
							end="${requestScope.allInfoMap.endMonth }" varStatus="status"
							step="1">
							<option id="monthItem" value="${data }">${data }월</option>
						</c:forEach>
				</select></td>
				<td align="center"><input type="button" id="addBtn" value="추가">
				</td>
			</tr>
		</thead>
		<tr>
			<td colspan="2" align="center">
				<table class="schedule">
					<tr>
						<td></td>
						<td id="holdTime">09시</td>
						<td id="holdTime">12시</td>
						<td id="holdTime">15시</td>
						<td id="holdTime">18시</td>
						<td id="holdTime">21시</td>
						<td id="holdTime">24시</td>
					</tr>
					<c:forEach varStatus="status" begin="1"
						end="${requestScope.allInfoMap.date}">
						<tr>
							<td id="${status.count }" align="center">${status.count }일</td>
							<td id="${status.count }"></td>
							<td id="${status.count }"></td>
							<td id="${status.count }"></td>
							<td id="${status.count }"></td>
							<td id="${status.count }"></td>
							<td id="${status.count }"></td>
						</tr>
					</c:forEach>
				</table>
			</td>
		</tr>
	</table>
</center>